<template>
  <div>
    <button @click="comp = 'News'">新闻</button>
    <button @click="comp = 'Music'">音乐</button>
    <button @click="comp = 'Game'">游戏</button>
     <!-- 
      如何监听已经被keep-alive缓存的组件失活和激活？？？使用两个生命周期函数：
        - activated：被 keep-alive 缓存的组件激活时调用。
        - deactivated：被 keep-alive 缓存的组件失活时调用。
     -->
    <keep-alive>
      <component :is="comp"></component>
    </keep-alive>
    
  </div>
</template>

<script>
import News from "./components/News";
import Music from "./components/Music";
import Game from "./components/Game";
export default {
  name: "App",
  components: {
    News,
    Music,
    Game,
  },
  data() {
    return {
      comp: "",
    };
  },
};
</script>

<style></style>
